<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Complex Example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
     
     <div id="main">
        <h1>Vue isotope</h1>
       
        <div >
            <div>
                <isotope  ref="cpt1" id="root_isotope1" class="isoDefault" :options='option1' :list="list" @filter="filterOption.first=arguments[0]" @sort="sortOption.first=arguments[0]">
                    <div v-for="element,index in list" @click="selected=element" :key="index" >
                    {{element.name}}
                    <br>
                    {{element.id}}
                    </div>
                 </isotope>
                 <button :class="[sortOption.first==='name' ? 'is-checked' : '']" @click="$refs.cpt1.sort('name')">Sort by name</button>
                 <button :class="[sortOption.first==='id' ? 'is-checked' : '']"  @click="$refs.cpt1.sort('id')">Sort by id</button> 
                 <button :class="[filterOption.first==='isEven' ? 'is-checked' : '']" @click="$refs.cpt1.filter('isEven')">Filter Even</button>
                 <button :class="[filterOption.first==='isOdd' ? 'is-checked' : '']"  @click="$refs.cpt1.filter('isOdd')">Filter Odd</button>
                 <button  @click="$refs.cpt1.unfilter()">Unfilter</button>
                 <button @click="$refs.cpt1.shuffle()">Shuffle</button>
            </div>

             <div>
                <isotope  ref="cpt2" id="root_isotope2" class="isoDefault" :options='option2' :list="list" @filter="filterOption.second=arguments[0]" @sort="sortOption.second=arguments[0]">
                    <div v-for="element,index in list" @click="selected=element" :key="index">
                    {{element.name}}
                    <br>
                    {{element.id}}
                    </div>
                 </isotope>
                 <button :class="[sortOption.second==='name' ? 'is-checked' : '']" @click="$refs.cpt2.sort('name')">Sort by name</button>
                 <button :class="[sortOption.second==='id' ? 'is-checked' : '']" @click="$refs.cpt2.sort('id')">Sort by id</button> 
                 <button :class="[filterOption.second==='isEven' ? 'is-checked' : '']"  @click="$refs.cpt2.filter('isEven')">Filter Even</button>
                 <button :class="[filterOption.second==='isOdd' ? 'is-checked' : '']" @click="$refs.cpt2.filter('isOdd')">Filter Odd</button>
                 <button @click="$refs.cpt2.unfilter()">Unfilter</button>
                 <button @click="$refs.cpt2.shuffle()">Shuffle</button>
            </div>
         </div>

        <button @click="add">Add</button>
        <button @click="replace">Replace</button>

        <br>
        <div>
            <div v-if="selected" class="item">
                <input type="text" name="" v-model="selected.name">
                <br>
                <input type="text" name="" v-model="selected.id">
            </div>
        </div>

        <div>
            <a href="index.html">Simple example</a>
            <a href="metal.html">Isotope example</a>
            <a href="component.html">Component example</a>
        </div>

    </div>  

        <script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
        <script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
        <script type="text/javascript" src="..\libs\isotope\isotope.pkgd.js"></script>
        <script type="text/javascript" src="src\vue_isotope.js"></script>
        <script type="text/javascript" src="script\complex.js"></script>
    </body>
</html>